<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抖音爱心表白</title>
    <style>
        /* 原有样式保持不变 */
        body {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .heart {
            position: relative;
            width: 200px;
            height: 200px;
            animation: heartbeat 1.2s infinite;
            filter: drop-shadow(0 0 20px #ff006a);
            z-index: 2;
        }

        /* 新增粒子样式 */
        .particles {
            position: absolute;
            pointer-events: none;
            width: 100%;
            height: 100%;
        }

        .particle {
            position: absolute;
            background: linear-gradient(45deg, #ff267e, #ff0026);
            border-radius: 50%;
            pointer-events: none;
            animation: particleFly 1.5s ease-out forwards;
        }

        @keyframes particleFly {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(var(--tx), var(--ty)) scale(0.2);
            }
        }

        /* 其他原有样式保持不变 */
    </style>
</head>
<body>
<div class="heart"></div>
<div class="text">我爱你！❤️</div>
<div class="particles"></div> <!-- 新增粒子容器 -->

<script>
    // 原有点击效果保持不变
    document.querySelector('.heart').addEventListener('click', function() {
        this.style.animation = 'none';
        setTimeout(() => this.style.animation = 'heartbeat 1.2s infinite', 10);
    });

    // 新增粒子生成函数
    function createParticles() {
        const particles = document.querySelector('.particles');
        const heartRect = document.querySelector('.heart').getBoundingClientRect();
        const centerX = heartRect.left + heartRect.width/2;
        const centerY = heartRect.top + heartRect.height/2;

        // 每次生成30个粒子
        for(let i=0; i<30; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';

            // 随机粒子参数
            const size = Math.random() * 5 + 2;
            const angle = Math.random() * Math.PI * 2;
            const distance = Math.random() * 150 + 50;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;

            // 设置粒子样式
            particle.style.cssText = `
                    left: ${centerX}px;
                    top: ${centerY}px;
                    width: ${size}px;
                    height: ${size}px;
                    --tx: ${tx}px;
                    --ty: ${ty}px;
                `;

            particles.appendChild(particle);

            // 动画结束后移除粒子
            particle.addEventListener('animationend', () => {
                particle.remove();
            });
        }
    }

    // 每隔800毫秒生成粒子（配合心跳节奏）
    setInterval(createParticles, 800);
    // 初始立即生成
    createParticles();
</script>
</body>
</html>
